<template>
  <div class="program-list">
    <!-- Video Carousel Section -->
    <!-- <div class="carousel-section">
      <el-carousel height="700px">
        <el-carousel-item v-for="video in carouselVideos" :key="video.id">
          <div class="carousel-item" :style="{ backgroundImage: `url(${video.cover})` }">
            <div class="carousel-content">
              <h2>{{ video.title }}</h2>
              <p>{{ video.description }}</p>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div> -->
    <div class="search-bar">
      <el-input v-model="keywords" class="input" @input="getData()" placeholder="请输入节目单名称搜索" clearable size="large">
        <template #append>
          <svg-icon icon-class="search" style="font-size: 16px;"/>
        </template>
      </el-input>      
    </div>
    <div class="content">
      <!-- Hot Videos Section -->
      <div class="hot-videos-section">
        <Waterfall :items="programList"/>

        <!-- <el-pagination background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination> -->
      </div>
      <empty-data v-if="programList.length==0"/>
      <!-- Active Creators Section -->
      <div class="creators-section" v-if="programList.length>0">
        <h2>活跃创作者</h2>
        <div class="creators-list">
          <div v-for="creator in activeCreators" :key="creator.id" class="creator-item">
            <el-avatar :size="64" :src="creator.avatar" />
            <p class="creator-name">{{ creator.nickname }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, } from 'vue'
import { useRouter } from 'vue-router'
import { program } from "@/api/pcApi";

import Waterfall from '@/components/Waterfall.vue'

const router = useRouter();

const keywords = ref('')
const programList = ref([])
const currentPage = ref(1)
const pageSize = ref(1000)
const total = ref(0)

const handleSizeChange = (val) => {
  currentPage.value = 1
  pageSize.value = val
  getData()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getData()
}

const getData = async () => {
  try {
    programList.value = []
    const res = await program({pageNum: currentPage.value, pageSize: pageSize.value, programTypeId: 1, name: keywords.value})
		total.value = res.total
    programList.value = res.rows || []
  } catch (error) {
    console.log(error)
  }
}

// Mock data - Replace with actual API calls
const carouselVideos = ref([
  {
    id: 1,
    title: '2025春晚精彩片段1',
    description: '精彩纷呈的春晚节目',
    cover: 'https://cn.bing.com/th?id=OHR.ReinefjordenNorway_EN-CN6531355034_1920x1080.webp&qlt=50'
  },
  {
    id: 2,
    title: '2025春晚精彩片段2',
    description: '精彩纷呈的春晚节目',
    cover: 'https://cn.bing.com/th?id=OHR.ReinefjordenNorway_EN-CN6531355034_1920x1080.webp&qlt=50'
  },
  {
    id: 3,
    title: '2025春晚精彩片段3',
    description: '精彩纷呈的春晚节目',
    cover: 'https://cn.bing.com/th?id=OHR.ReinefjordenNorway_EN-CN6531355034_1920x1080.webp&qlt=50'
  },
])

const hotVideos = ref([
  {
    id: 1,
    title: '歌舞《欢乐中国年》',
    description: '群星献唱欢乐中国年',
    cover: 'https://cn.bing.com/th?id=OHR.ReinefjordenNorway_EN-CN6531355034_1920x1080.webp&qlt=50',
    hotScore: 9.8,
    type: '2024'
  },
  // Add more hot videos...
])

const activeCreators = ref([
  {
    id: 1,
    nickname: '春晚官方',
    avatar: 'https://miaocode-ai.oss-ap-southeast-1.aliyuncs.com/gt/storage/2025-01-23/id_0c983f80b0794d90bc4d0337c5ec1cba_file_default_avatar_1.jpg'
  },
  // Add more creators...
])

const selectedType = ref('all')

// Filter videos based on selected type
const filteredHotVideos = computed(() => {
  if (selectedType.value === 'all') {
    return hotVideos.value
  }
  return hotVideos.value.filter(video => video.type === selectedType.value)
})

const handleVideoClick = (videoId) => {
  router.push({ name: 'video-detail', params: { id: videoId } })
}

onMounted(() => {
  getData()
})
</script>

<style lang="less" scoped>
.program-list {
  padding-bottom: 180px;
  .search-bar {
    background: url('../assets/image/home/banner2.jpg') no-repeat;
    background-size: 100% 100%;
    padding-top: 208px;
    padding-bottom: 122px;
    margin-bottom: 40px;
    text-align: center;
    .input {    
      width: 808px;
      :deep(.el-input__wrapper) {
        // border-radius: 8px!important;

      }
    }
  }
  // .carousel-section {
  //   margin-bottom: 40px;
  //   .carousel-item {
  //     height: 100%;
  //     background-size: cover;
  //     background-position: center;
  //     position: relative;
  //     .carousel-content {
  //       position: absolute;
  //       bottom: 0;
  //       left: 0;
  //       right: 0;
  //       padding: 20px;
  //       background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  //       color: white;
  //     }
  //   }
  // }
  .content {
    width: 1160px;
    margin-left: auto;
    margin-right: auto;
    .hot-videos-section {
      margin-bottom: 40px;     
      
      .type-selector {
        margin-bottom: 20px;
      }
    }
  }
}

.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.video-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.video-cover img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.video-info {
  padding: 15px;
}

.creators-section {
  margin-top: 40px;
}

.creators-list {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 20px 0;
}

.creator-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.creator-name {
  margin-top: 8px;
  text-align: center;
  font-size: 14px;
}

.stats {
  margin-top: 8px;
  color: #666;
}

.hot-score {
  color: #ff6b6b;
  font-weight: bold;
}
</style>